<template>
  <ModalBox title="添加學生" :width="400" ref="modalRef">
    <a-form
      :model="formState"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      autocomplete="off"
      ref="formRef"
    >
      <a-form-item
        label="作業評分:"
        name="username"
        :rules="[{ required: true, message: '請輸入評分，滿分100分!' }]"
      >
        <a-input
          v-model:value="formState.username"
          placeholder="請輸入評分，滿分100分"
          style="height: 40px"
        />
      </a-form-item>
      <a-form-item
        label="作業評語:"
        name="phone"
        :rules="[{ required: true, message: '請輸入對作業的簡單評語!' }]"
      >
        <a-textarea
          v-model:value="formState.phone"
          placeholder="請輸入對作業的簡單評語!"
          style="height: 156px"
          show-count
          :maxlength="50"
        />
      </a-form-item>
    </a-form>

    <div class="w-full flex justify-center gap-5 pt-5">
      <a-button size="large" style="width: 96px" @click="close">取消</a-button>
      <a-button type="primary" size="large" @click="submit">確認添加</a-button>
    </div>
  </ModalBox>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ModalBox from '@/components/ModalBox.vue'
const modalRef = ref()
const formRef = ref()

interface FormState {
  username: string
  role: string | null
  account: string
  phone: string
}
const formState = ref<FormState>({
  username: '',
  role: null,
  account: '',
  phone: '',
})

const submit = () => {
  formRef.value.validate().then(() => {
    console.log('validate success')
    close()
  })
}

const open = () => {
  modalRef.value.open()
}

const close = () => {
  modalRef.value.close()
}

defineExpose({
  open,
  close,
})
</script>
